<template>
  <div>
    <header class="header">
      <img src="~/assets/navLogo.jpg" class="logo" @click="navigateTo('/')" />
      <nav class="head_list">
        <section v-for="(item, index) in state.headList" :key="index" class="head_item">
          <NuxtLink :to="item.path">{{ item.name }}</NuxtLink>
        </section>
      </nav>
      <span v-if="!store.isLogin">
        <el-button type="primary" @click="store.visiable = true">登录</el-button>
      </span>
      <div v-else class="avatarCon" style="position: relative;">
        <div class="publishBox">
          <el-popover placement="bottom" width="230" popper-style="border-radius: 10px;">
            <template #reference>
              <div class="publishBtn">
                <el-icon style="margin-right: 5px;">
                  <CirclePlus />
                </el-icon>
                发布
              </div>
            </template>
            <div class="publishPopover">
              <section @click="navigateTo('/release')">
                <img src="~/assets/resources/index/publish1.png" alt="">
                <p>发布项目</p>
              </section>
              <section @click="navigateTo('/resources/uploadResources')">
                <img src="~/assets/resources/index/publish2.png" alt="">
                <p>发布资源</p>
              </section>
            </div>
          </el-popover>

        </div>
        <div style="display:flex;cursor: pointer;" @click.stop="state.showUserInfo = !state.showUserInfo">
          <img style="width:35px;height:35px;border-radius:50%;"
            v-if="store.token.imageUrl && store.token.imageUrl != ''" :src="store.token.imageUrl" />
          <div v-else class="header_avatar">
            {{ store.token && store.token.nickName ? store.token.nickName.slice(0, 1) : '' }}
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" class="angle_bracket_down"
            :style="{ transform: state.showUserInfo ? 'rotate(180deg)' : 'rotate(0)' }" viewBox="0 0 10 7"
            aria-hidden="true">
            <path
              d="M4.95 4.071l2.828-2.828a1 1 0 1 1 1.414 1.414L5.657 6.192a.997.997 0 0 1-1.414 0L.707 2.657a1 1 0 0 1 1.414-1.414L4.95 4.07z">
            </path>
          </svg>
        </div>
        <!-- 下拉框 -->
        <nav class="user-mask" v-if="state.showUserInfo" @click="state.showUserInfo = false">
          <div class="user-info-dropdown" @click.stop="state.showUserInfo = true">
            <div class="center user_info">
              <img class="user_avatar" style="width:50px;height:50px;border-radius:50%;"
                v-if="store.token.imageUrl && store.token.imageUrl != ''" :src="store.token.imageUrl" />
              <div v-else class="header_avatar user_avatar">{{ store.token &&
                store.token.nickName ? store.token.nickName.slice(0, 1) : '' }}</div>
              <div style="width:150px;line-height:22px;">
                <div style="font-size:15px;">{{ store.token.nickName }}</div>
                <div style="font-size:12px;color:#999;">{{ store.token.cellPhone }}</div>
              </div>
            </div>

            <ul @click="navigateTo('/my')" class="user_nav">
              <svg xmlns="http://www.w3.org/2000/svg" style="margin-right:15px;" width="16" height="16" fill="none"
                viewBox="-2 0 16 16">
                <path fill="#9EA9BC"
                  d="M5.867 8.13c2.166 0 3.866-1.65 3.866-3.815C9.733 2.213 7.967.5 5.867.5 3.7.5 1.933 2.246 1.933 4.315c0 2.166 1.767 3.814 3.934 3.814ZM9.7 9.745c-.733-.518-1.7-.744-2.6-.744H4.833c-.9 0-1.866.226-2.6.711C.9 10.586 0 12.073 0 13.754v.291C0 15.468 2.133 15.5 4.867 15.5h2.266c2.734 0 4.867 0 4.867-1.455v-.29c0-1.682-.933-3.169-2.3-4.01Z">
                </path>
              </svg>
              我的主页
            </ul>
            <ul class="user_nav" style="border:none;" @click="loginOut">
              <svg xmlns="http://www.w3.org/2000/svg" style="margin-right:15px;" width="16" height="16" fill="none"
                viewBox="-1.5 0 16 16">
                <g fill="#9EA9BC" clip-path="url(#clip0_3947_14635)">
                  <path
                    d="M11.25 12.5H7.5V4.008a.75.75 0 0 0-.471-.697L3.75 2h7.5v1.125c0 .207.168.375.375.375h.75a.375.375 0 0 0 .375-.375V1.25A.75.75 0 0 0 12 .5H.75a.75.75 0 0 0-.75.75v10.742a.75.75 0 0 0 .471.697l6.515 2.605a.375.375 0 0 0 .514-.348V14h5.25v-2.625a.375.375 0 0 0-.375-.375h-.75a.375.375 0 0 0-.375.375V12.5Z">
                  </path>
                  <path
                    d="M14.466 7.571a.375.375 0 0 0 0-.643L11.82 5.34a.375.375 0 0 0-.568.322V6.5H8.627a.375.375 0 0 0-.375.375v.75c0 .207.168.375.375.375h2.625v.837c0 .292.318.472.568.322l2.646-1.588Z">
                  </path>
                </g>
                <defs>
                  <clipPath id="clip0_3947_14635">
                    <path fill="#fff" d="M0 .5h15v15H0z"></path>
                  </clipPath>
                </defs>
              </svg>
              退出登录
            </ul>
          </div>
        </nav>
      </div>

      <nav v-if="state.width > 1200" style="flex:none;">迅颖大数据信息技术有限公司</nav>
      <el-popover v-else placement="bottom">
        <div v-for="(item, index) in state.headList" :key="index" class="nav">
          <NuxtLink :to="item.path">{{ item.name }}</NuxtLink>
        </div>
        <svg slot="reference" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M4 6H20M20 12L4 12M20 18H4" stroke="black" stroke-width="1.5"></path>
        </svg>
      </el-popover>

      <el-popover placement="bottom" width="200" trigger="click" popper-style="border-radius: 10px;padding:0;top: 69px">
        <template #reference>
          <nav class="more">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
          </nav>
        </template>
        <div>
          <ul class="user_nav" @click="navigateTo('/')" style="display: flex;align-items: center;padding: 18px 20px;">
            <img src="~/assets/resources/index/publish1.png" alt="" style="width: 20px;margin-right:15px;">
            项目
          </ul>
          <ul class="user_nav" @click="navigateTo('/resources')"
            style="display: flex;align-items: center;padding: 18px 20px;">
            <img src="~/assets/resources/index/publish2.png" alt="" style="width: 20px;margin-right:15px;">
            资源
          </ul>
        </div>
      </el-popover>
    </header>
  </div>
</template>

<script setup lang="ts">
import { userStore } from "~/composables/useUserStore";
import { CirclePlus } from '@element-plus/icons-vue';
const store = userStore()
const state = reactive({
  showBg: true,
  isLogin: true,
  width: 1600,
  showUserInfo: false,
  headList: [{
    name: '项目', path: '/'
  },
  {
    name: '资源', path: '/resources'
  }
  ],

})
function getCode() {
  const url = "https://xunyingcloud.cn/my/mobile/withdraw"
  const appid = "wx4754a2bb841ba595"
  window.location.href =
    `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=` +
    encodeURIComponent(url) +
    "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
}


//钩子
// 客户端渲染
onMounted(() => {
  //过去宽度
  state.width = document.documentElement.clientWidth
  //获取高度
  state.height = document.documentElement.clientHeight
  window.onresize = () => {
    state.width = document.documentElement.clientWidth
    state.height = document.documentElement.clientHeight
    state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 748 ? false : true
    // jumpLe =  showBg ? (width>720&&width<1100?3:(width>1100&&width<1400? 4 : 5)): 1
  }
  state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 748 ? false : true
  window.addEventListener("scroll", handleScroll);
  if (!state.showBg) {
    // getCode()
  }
})

// 退出登录
function loginOut() {
  ElMessageBox.confirm('确定退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    store.token = {}
    //退出登录
    store.isLogin = false
    ElMessage({
      type: 'success',
      message: '已退出登录!'
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消退出登录'
    });
  });
}

function handleScroll() {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
}



</script>

<style scoped lang="scss">
.publishPopover {
  display: flex;
  justify-content: space-between;
  padding: 13px;

  section {
    text-align: center;
    cursor: pointer;

    img {
      width: 46px;
      margin-bottom: 10px;
    }

    p {
      font-weight: 400;
      font-size: 16px;
      color: #666666;
    }
  }

}

.nav {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  border-bottom: 1px soild #eef0f5;
}

.header {
  background: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 72px;
  border-bottom: 1px solid hsla(0, 0%, 86.7%, .5);
  display: flex;
  align-items: center;
  color: #415058;
  justify-content: space-between;
  padding: 0 25px;
  box-sizing: border-box;
}

.avatarCon {
  margin-right: 20px;
  position: relative;
  display: flex;
  align-items: center;
  flex: none;

  .publishBox {
    margin-right: 40px;

    .publishBtn {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 10px 28px;
      background: linear-gradient(94deg, #488BFF 0%, #9ABEFF 100%);
      border-radius: 24px 24px 24px 24px;
      color: #ffffff;
      font-size: 18px;
    }
  }

}

.header .logo {
  width: 188px;
  cursor: pointer;
}

.head_list {
  display: flex;
  width: 60%;
  cursor: pointer;
  margin-left: 20px
}

.head_item {
  margin-right: 50px;
}

.header_avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  line-height: 35px;
  text-align: center;
  background: #1684fc;
  color: #fff;
}

.angle_bracket_down {
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  transition: all .2s ease-in;
  width: 10px;
  height: auto;
  fill: #c8cdd1;
  margin-left: .75em;
}

.user-mask {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  left: 0;
}

.user-info-dropdown {
  z-index: 1000;
  position: absolute;
  right: 0;
  top: 69px;
  right: 50px;
  width: 260px;
  font-size: 12px;
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

.user_info {
  justify-content: space-between;
  background: linear-gradient(1turn, #edf5ff .01%, #c8dbff 102.95%);
  padding: 18px;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
}

.user_avatar {
  width: 50px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  margin-right: 20px;
}

.user_nav {
  padding: 18px 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #dedee4;
  justify-content: unset;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

a:-webkit-any-link {
  text-decoration: none;
  color: #415058;
}

.more {
  display: none;

  .line {
    width: 29px;
    height: 4px;
    background: #666666;
    border-radius: 3px 3px 3px 3px;

  }

  .line+.line {
    margin-top: 6px;
  }
}

@media screen and (max-width:768px) {
  .header {
    position: unset;
    justify-content: space-between;
    padding: 0 10px;
    .head_list{
      display: none
    }
    .logo {
      width: 25%;
      margin-right: calc(50% - 20px);
    }
  }

  .avatarCon {
    width: 15%;

    .publishBox {
      display: none;
    }
  }

  .more {
    width: 10%;
    display: block;
  }
}
</style>
